<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nội thất</title>
<style>
#game {
	width: 764px;
	height: 565px;
	background-color:#F6C;
	border: 1px dashed black;
	z-index: 0;
}
#stage {
	position:relative;
	height: 510px;
	background-color: black;
	z-index: 1;
}
#menu{
	position:relative;
	height:60px;
	background-color:#963;
	z-index:1;
}
.cell {
	position: absolute;
	background: no-repeat center;
}
</style>
</head>

<body>
<section id="game">
  <div id="stage"></div>
  <div id="menu"></div>
  <p id="output"></p>
</section>
<script>

var stage = document.getElementById("stage");
var output = document.getElementById("output");
var menu = document.getElementById("menu");

function MyController(name, count)
{
	this.name = name;
	this.count = count;
	this.currentIndex = 1;
	this.setImage();
	this.setup();
}

MyController.prototype.setup = function()
{
	var img = document.createElement("div");
	img.id = "btn" + this.name;
	img.style.cssFloat = "left";
	img.style.width = 55 + "px";
	img.style.height = 55 + "px";
	img.style.backgroundImage = "url(image/" + this.name +".png)";
	menu.appendChild(img);
	var self = this;
	img.onclick = (function(){
		self.getNextImage();
	});
	
}

MyController.prototype.getNextImage = function()
{
	this.currentIndex++;
	if (this.currentIndex > this.count) this.currentIndex = 1;
	this.setImage();
}

MyController.prototype.setImage = function()
{
	var div = document.querySelector("#" + this.name);
	div.style.backgroundImage = "url(image/" + this.name + this.currentIndex + ".png)";
}

var WIDTH = 764;
var HEIGHT = 578;

var objs = [
	{
	"name": "san",
	"x": 0,
	"y": 291,
	"width": WIDTH,
	"height": 218,
	"zIndex": 3,
	"nImages": 4,
	}, 
	{
	"name": "tham",
	"x": 255,
	"y": 375,
	"width": 406,
	"height": 128,
	"zIndex": 4,
	"nImages": 5,
	}, 
	{
	"name": "tuong",
	"x": 0,
	"y": 0,
	"width": 764,
	"height": 370,
	"zIndex": 2,
	"nImages": 7,
	}, 
	{
	"name": "cuaso",
	"x": 570,
	"y": 50,
	"width": 154,
	"height": 189,
	"zIndex": 5,
	"nImages": 6,
	}, 
	{
	"name": "man",
	"x": 553,
	"y": 28,
	"width": 197,
	"height": 221,
	"zIndex": 6,
	"nImages": 4,
	}, 
	{
	"name": "ban",
	"x": 475,
	"y": 241,
	"width": 305,
	"height": 180,
	"zIndex": 8,
	"nImages": 5,
	}, 
	{
	"name": "trenban",
	"x": 564,
	"y": 178,
	"width": 142,
	"height": 85,
	"zIndex": 9,
	"nImages": 4,
	}, 
	{
	"name": "kesach",
	"x": 330,
	"y": 90,
	"width": 223,
	"height": 267,
	"zIndex": 7,
	"nImages": 5,
	}, 
	{
	"name": "giuong",
	"x": 14,
	"y": 152,
	"width": 348,
	"height": 307,
	"zIndex": 10,
	"nImages": 5,
	}, 
	{
	"name": "dochoi",
	"x": 290,
	"y": 230,
	"width": 299,
	"height": 295,
	"zIndex": 11,
	"nImages": 6,
	}, 
	{
	"name": "trangtri",
	"x": 50,
	"y": 30,
	"width": 232,
	"height": 150,
	"zIndex": 12,
	"nImages": 6,
	}, 
	{
	"name": "trannha",
	"x": 190,
	"y": 0,
	"width": 420,
	"height": 116,
	"zIndex": 12,
	"nImages": 3,
	}, 
];

window.onload = function(){
	var controllers = [];
	for (var i=0;i<objs.length;i++)
	{
		create(objs[i].name, objs[i].x, objs[i].y, objs[i].width, objs[i].height, objs[i].zIndex);
		if (objs[i].name === "trenban")
		{
			var tb = document.getElementById(objs[i].name);
			tb.style.backgroundPosition = "center bottom";
		}
		controller = new MyController(objs[i].name, objs[i].nImages);
	}
};

function create(name, x, y, width, height, zIndex)
{
	var div = document.createElement("div");
	div.setAttribute("id", name);
	div.setAttribute("class", "cell");
	div.style.top = y +"px";
	div.style.left = x +"px";
	div.style.width = width +"px";
	div.style.height = height +"px";
	div.style.zIndex = zIndex;
	stage.appendChild(div);
}
</script>
</body>
</html>
